ബ്രൗസർ റെൻഡറിംഗ് പൈപ്പ്ലൈൻ മാസ്റ്റർ ചെയ്യാം: ജാവാസ്ക്രിപ്റ്റിന്റെ പ്രകടനത്തിലുള്ള സ്വാധീനത്തെക്കുറിച്ചുള്ള ആഴത്തിലുള്ള പഠനം

ഡിജിറ്റൽ ലോകത്ത്, വേഗത ഒരു ഫീച്ചർ മാത്രമല്ല; അത് മികച്ച ഉപയോക്തൃ അനുഭവത്തിന്റെ അടിസ്ഥാനമാണ്. വേഗത കുറഞ്ഞതും പ്രതികരിക്കാത്തതുമായ ഒരു വെബ്സൈറ്റ് ഉപയോക്താക്കളെ നിരാശരാക്കുകയും, ബൗൺസ് റേറ്റുകൾ വർദ്ധിപ്പിക്കുകയും, ആത്യന്തികമായി ബിസിനസ്സ് ലക്ഷ്യങ്ങളെ പ്രതികൂലമായി ബാധിക്കുകയും ചെയ്യും. വെബ് ഡെവലപ്പർമാർ എന്ന നിലയിൽ, ഈ അനുഭവത്തിന്റെ ശില്പികൾ നമ്മളാണ്, നമ്മുടെ കോഡ് എങ്ങനെയാണ് ഒരു ബ്രൗസർ ദൃശ്യവും സംവേദനാത്മകവുമായ പേജാക്കി മാറ്റുന്നത് എന്നതിന്റെ അടിസ്ഥാനപരമായ മെക്കാനിക്സ് മനസ്സിലാക്കുന്നത് വളരെ പ്രധാനമാണ്. പലപ്പോഴും സങ്കീർണ്ണമായി കാണപ്പെടുന്ന ഈ പ്രക്രിയ ബ്രൗസർ റെൻഡറിംഗ് പൈപ്പ്ലൈൻ എന്നറിയപ്പെടുന്നു.

ആധുനിക വെബ് ഇന്ററാക്റ്റിവിറ്റിയുടെ ഹൃദയഭാഗത്ത് ജാവാസ്ക്രിപ്റ്റ് ആണ്. സ്റ്റാറ്റിക് പേജുകൾക്ക് ജീവൻ നൽകുന്ന ഭാഷയാണിത്, ഡൈനാമിക് ഉള്ളടക്ക അപ്‌ഡേറ്റുകൾ മുതൽ സങ്കീർണ്ണമായ സിംഗിൾ-പേജ് ആപ്ലിക്കേഷനുകൾ വരെ സാധ്യമാക്കുന്നു. എന്നിരുന്നാലും, വലിയ ശക്തിയോടൊപ്പം വലിയ ഉത്തരവാദിത്തവും വരുന്നു. ഒപ്റ്റിമൈസ് ചെയ്യാത്ത ജാവാസ്ക്രിപ്റ്റ് ആണ് വെബ് പ്രകടനം മോശമാകുന്നതിനുള്ള ഏറ്റവും സാധാരണമായ കാരണങ്ങളിലൊന്ന്. ഇത് ബ്രൗസറിന്റെ റെൻഡറിംഗ് പൈപ്പ്ലൈനിനെ തടസ്സപ്പെടുത്തുകയോ, കാലതാമസം വരുത്തുകയോ, അല്ലെങ്കിൽ ചെലവേറിയതും അനാവശ്യവുമായ ജോലികൾ ചെയ്യാൻ നിർബന്ധിക്കുകയോ ചെയ്യും. ഇത് 'ജാങ്ക്' (jank) എന്ന് വിളിക്കപ്പെടുന്ന പ്രശ്നത്തിലേക്ക് നയിക്കുന്നു—അതായത്, മുറിഞ്ഞുപോകുന്ന ആനിമേഷനുകൾ, ഉപയോക്തൃ ഇൻപുട്ടിനോടുള്ള വേഗത കുറഞ്ഞ പ്രതികരണങ്ങൾ, കൂടാതെ മൊത്തത്തിൽ ഒരു മന്ദഗതിയിലുള്ള അനുഭവം.

ഈ സമഗ്രമായ ഗൈഡ് ഫ്രണ്ട്-എൻഡ് ഡെവലപ്പർമാർക്കും, പെർഫോമൻസ് എഞ്ചിനീയർമാർക്കും, വേഗതയേറിയ ഒരു വെബ് നിർമ്മിക്കാൻ താൽപ്പര്യമുള്ള ആർക്കും വേണ്ടിയുള്ളതാണ്. ഞങ്ങൾ ബ്രൗസർ റെൻഡറിംഗ് പൈപ്പ്ലൈനിന്റെ ദുരൂഹത നീക്കി, അതിനെ മനസ്സിലാക്കാവുന്ന ഘട്ടങ്ങളായി വിഭജിക്കും. അതിലുപരി, ഈ പ്രക്രിയയിൽ ജാവാസ്ക്രിപ്റ്റിന്റെ പങ്കിന് ഞങ്ങൾ പ്രത്യേക ഊന്നൽ നൽകും, അത് എങ്ങനെ ഒരു പ്രകടന തടസ്സമായി മാറുന്നുവെന്നും, അത് ലഘൂകരിക്കാൻ നമുക്ക് എന്തുചെയ്യാൻ കഴിയുമെന്നും കൃത്യമായി പര്യവേക്ഷണം ചെയ്യും. ഇത് പൂർത്തിയാകുമ്പോഴേക്കും, കൂടുതൽ മികച്ച പ്രകടനമുള്ള ജാവാസ്ക്രിപ്റ്റ് എഴുതാനും ലോകമെമ്പാടുമുള്ള നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് തടസ്സമില്ലാത്തതും ആനന്ദകരവുമായ അനുഭവം നൽകാനും ആവശ്യമായ അറിവും പ്രായോഗിക തന്ത്രങ്ങളും നിങ്ങൾ സ്വായത്തമാക്കിയിരിക്കും.

വെബിന്റെ ബ്ലൂപ്രിന്റ്: ബ്രൗസർ റെൻഡറിംഗ് പൈപ്പ്ലൈനിനെ മനസ്സിലാക്കാം

ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന് മുമ്പ്, നമ്മൾ ആദ്യം മനസ്സിലാക്കണം. ബ്രൗസർ റെൻഡറിംഗ് പൈപ്പ്ലൈൻ (ക്രിട്ടിക്കൽ റെൻഡറിംഗ് പാത്ത് എന്നും അറിയപ്പെടുന്നു) എന്നത് നിങ്ങൾ എഴുതുന്ന HTML, CSS, ജാവാസ്ക്രിപ്റ്റ് എന്നിവയെ സ്ക്രീനിലെ പിക്സലുകളാക്കി മാറ്റാൻ ബ്രൗസർ പിന്തുടരുന്ന ഘട്ടങ്ങളുടെ ഒരു ശ്രേണിയാണ്. ഇതിനെ ഒരു കാര്യക്ഷമമായ ഫാക്ടറി അസംബ്ലി ലൈനായി കരുതുക. ഓരോ സ്റ്റേഷനും ഒരു പ്രത്യേക ജോലിയുണ്ട്, കൂടാതെ ഉൽപ്പന്നം ഒരു സ്റ്റേഷനിൽ നിന്ന് അടുത്തതിലേക്ക് എത്ര സുഗമമായി നീങ്ങുന്നു എന്നതിനെ ആശ്രയിച്ചിരിക്കും മുഴുവൻ ലൈനിന്റെയും കാര്യക്ഷമത.

ബ്രൗസർ എഞ്ചിനുകൾക്കിടയിൽ (Chrome/Edge-ന് ബ്ലിങ്ക്, Firefox-ന് ഗെക്കോ, Safari-ക്ക് വെബ്കിറ്റ് പോലുള്ളവ) പ്രത്യേകതകൾ അല്പം വ്യത്യാസപ്പെടാമെങ്കിലും, അടിസ്ഥാന ഘട്ടങ്ങൾ ആശയപരമായി ഒന്നുതന്നെയാണ്. നമുക്ക് ഈ അസംബ്ലി ലൈനിലൂടെ ഒന്നു നടന്നുനോക്കാം.

ഘട്ടം 1: പാഴ്സിംഗ് - കോഡിൽ നിന്ന് ആശയത്തിലേക്ക്

നിങ്ങളുടെ HTML, CSS ഫയലുകൾ പോലുള്ള റോ ടെക്സ്റ്റ് അധിഷ്ഠിത റിസോഴ്സുകളിൽ നിന്നാണ് പ്രക്രിയ ആരംഭിക്കുന്നത്. ബ്രൗസറിന് ഇവയുമായി നേരിട്ട് പ്രവർത്തിക്കാൻ കഴിയില്ല; അവയെ അതിന് മനസ്സിലാക്കാൻ കഴിയുന്ന ഒരു ഘടനയിലേക്ക് പാഴ്സ് ചെയ്യേണ്ടതുണ്ട്.

• HTML പാഴ്സിംഗ് ടു DOM: ബ്രൗസറിന്റെ HTML പാഴ്സർ HTML മാർക്ക്അപ്പ് പ്രോസസ്സ് ചെയ്യുകയും, അതിനെ ടോക്കണൈസ് ചെയ്ത് ഡോക്യുമെന്റ് ഒബ്ജക്റ്റ് മോഡൽ (DOM) എന്ന് വിളിക്കുന്ന ഒരു ട്രീ പോലുള്ള ഡാറ്റാ ഘടനയിലേക്ക് നിർമ്മിക്കുകയും ചെയ്യുന്നു. DOM പേജിന്റെ ഉള്ളടക്കത്തെയും ഘടനയെയും പ്രതിനിധീകരിക്കുന്നു. ഓരോ HTML ടാഗും ഈ ട്രീയിലെ ഒരു 'നോഡ്' ആയി മാറുന്നു, ഇത് നിങ്ങളുടെ ഡോക്യുമെന്റിന്റെ ഘടനയ്ക്ക് സമാനമായ ഒരു പാരന്റ്-ചൈൽഡ് ബന്ധം സൃഷ്ടിക്കുന്നു.
• CSS പാഴ്സിംഗ് ടു CSSOM: അതേസമയം, ബ്രൗസർ ഒരു CSS-നെ (ഒന്നുകിൽ ഒരു <style> ടാഗിലോ അല്ലെങ്കിൽ ഒരു എക്സ്റ്റേണൽ <link> സ്റ്റൈൽഷീറ്റിലോ) കണ്ടുമുട്ടുമ്പോൾ, അത് CSS ഒബ്ജക്റ്റ് മോഡൽ (CSSOM) സൃഷ്ടിക്കാൻ അതിനെ പാഴ്സ് ചെയ്യുന്നു. DOM-ന് സമാനമായി, CSSOM എന്നത് DOM നോഡുകളുമായി ബന്ധപ്പെട്ട എല്ലാ സ്റ്റൈലുകളും അടങ്ങുന്ന ഒരു ട്രീ ഘടനയാണ്, ഇതിൽ ഉപയോക്തൃ-ഏജന്റ് സ്റ്റൈലുകളും നിങ്ങൾ നൽകിയ നിയമങ്ങളും ഉൾപ്പെടുന്നു.

ഒരു പ്രധാന കാര്യം: CSS ഒരു റെൻഡർ-ബ്ലോക്കിംഗ് റിസോഴ്സായി കണക്കാക്കപ്പെടുന്നു. എല്ലാ CSS-ഉം പൂർണ്ണമായി ഡൗൺലോഡ് ചെയ്ത് പാഴ്സ് ചെയ്യുന്നതുവരെ ബ്രൗസർ പേജിന്റെ ഒരു ഭാഗവും റെൻഡർ ചെയ്യില്ല. എന്തുകൊണ്ട്? കാരണം, പേജ് എങ്ങനെ ലേഔട്ട് ചെയ്യണമെന്ന് തീരുമാനിക്കുന്നതിന് മുമ്പ് ഓരോ എലമെന്റിനും അന്തിമ സ്റ്റൈലുകൾ എന്താണെന്ന് അതിന് അറിയേണ്ടതുണ്ട്. സ്റ്റൈൽ ഇല്ലാത്ത ഒരു പേജ് പെട്ടെന്ന് സ്റ്റൈൽ മാറുന്നത് ഉപയോക്താവിന് ഒരു മോശം അനുഭവമായിരിക്കും.

ഘട്ടം 2: റെൻഡർ ട്രീ - ദൃശ്യപരമായ ബ്ലൂപ്രിന്റ്

ബ്രൗസറിന് DOM (ഉള്ളടക്കം), CSSOM (സ്റ്റൈലുകൾ) എന്നിവ രണ്ടും ലഭിച്ചുകഴിഞ്ഞാൽ, അത് അവയെ സംയോജിപ്പിച്ച് റെൻഡർ ട്രീ സൃഷ്ടിക്കുന്നു. പേജിൽ യഥാർത്ഥത്തിൽ എന്താണ് പ്രദർശിപ്പിക്കേണ്ടത് എന്നതിന്റെ ഒരു പ്രതിനിധാനമാണ് ഈ ട്രീ.

റെൻഡർ ട്രീ DOM-ന്റെ ഒരു തനിപ്പകർപ്പല്ല. ദൃശ്യപരമായി പ്രസക്തമായ നോഡുകൾ മാത്രമേ ഇതിൽ ഉൾപ്പെടുന്നുള്ളൂ. ഉദാഹരണത്തിന്:

• <head>, <script>, അല്ലെങ്കിൽ <meta> പോലുള്ള ദൃശ്യപരമായ ഔട്ട്പുട്ട് ഇല്ലാത്ത നോഡുകൾ ഒഴിവാക്കപ്പെടുന്നു.
• CSS വഴി വ്യക്തമായി മറച്ച നോഡുകളും (ഉദാഹരണത്തിന്, display: none; ഉപയോഗിച്ച്) റെൻഡർ ട്രീയിൽ നിന്ന് ഒഴിവാക്കപ്പെടുന്നു. (ശ്രദ്ധിക്കുക: visibility: hidden; ഉള്ള എലമെന്റുകൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്, കാരണം അവ ഇപ്പോഴും ലേഔട്ടിൽ സ്ഥലം ഉപയോഗിക്കുന്നു).

റെൻഡർ ട്രീയിലെ ഓരോ നോഡിലും DOM-ൽ നിന്നുള്ള അതിന്റെ ഉള്ളടക്കവും CSSOM-ൽ നിന്ന് കണക്കാക്കിയ സ്റ്റൈലുകളും അടങ്ങിയിരിക്കുന്നു.

ഘട്ടം 3: ലേഔട്ട് (അഥവാ റീഫ്ലോ) - ജ്യാമിതി കണക്കാക്കൽ

റെൻഡർ ട്രീ നിർമ്മിച്ചതോടെ, ബ്രൗസറിന് ഇപ്പോൾ എന്താണ് റെൻഡർ ചെയ്യേണ്ടതെന്ന് അറിയാം, എന്നാൽ എവിടെ അല്ലെങ്കിൽ എത്ര വലുപ്പത്തിൽ എന്ന് അറിയില്ല. ഇതാണ് ലേഔട്ട് ഘട്ടത്തിന്റെ ജോലി. ബ്രൗസർ റെൻഡർ ട്രീയിലൂടെ സഞ്ചരിച്ച്, റൂട്ടിൽ നിന്ന് തുടങ്ങി, ഓരോ നോഡിന്റെയും കൃത്യമായ ജ്യാമിതീയ വിവരങ്ങൾ കണക്കാക്കുന്നു: അതിന്റെ വലുപ്പം (വീതി, ഉയരം), വ്യൂപോർട്ടിന് ആപേക്ഷികമായി പേജിലെ അതിന്റെ സ്ഥാനം.

ഈ പ്രക്രിയ റീഫ്ലോ എന്നും അറിയപ്പെടുന്നു. 'റീഫ്ലോ' എന്ന പദം വളരെ അനുയോജ്യമാണ്, കാരണം ഒരു എലമെന്റിലെ മാറ്റം അതിന്റെ കുട്ടികൾ, പൂർവ്വികർ, സഹോദരങ്ങൾ എന്നിവയുടെ ജ്യാമിതി പുനഃക്രമീകരിക്കേണ്ടി വരുന്ന ഒരു ശൃംഖലാ പ്രഭാവത്തിന് കാരണമാകും. ഉദാഹരണത്തിന്, ഒരു പാരന്റ് എലമെന്റിന്റെ വീതി മാറ്റുന്നത് അതിന്റെ എല്ലാ പിൻഗാമികൾക്കും ഒരു റീഫ്ലോയ്ക്ക് കാരണമായേക്കാം. ഇത് ലേഔട്ടിനെ കമ്പ്യൂട്ടേഷണലായി വളരെ ചെലവേറിയ ഒരു പ്രവർത്തനമാക്കി മാറ്റുന്നു.

ഘട്ടം 4: പെയിന്റ് - പിക്സലുകൾ നിറയ്ക്കൽ

ഇപ്പോൾ ബ്രൗസറിന് ഓരോ എലമെന്റിന്റെയും ഘടന, സ്റ്റൈലുകൾ, വലുപ്പം, സ്ഥാനം എന്നിവയെല്ലാം അറിയാം, ഈ വിവരങ്ങളെ സ്ക്രീനിലെ യഥാർത്ഥ പിക്സലുകളായി മാറ്റാനുള്ള സമയമാണിത്. പെയിന്റ് ഘട്ടത്തിൽ (അഥവാ റീപെയിന്റ്) ഓരോ നോഡിന്റെയും ദൃശ്യപരമായ എല്ലാ ഭാഗങ്ങൾക്കും പിക്സലുകൾ നിറയ്ക്കുന്നത് ഉൾപ്പെടുന്നു: നിറങ്ങൾ, ടെക്സ്റ്റ്, ചിത്രങ്ങൾ, ബോർഡറുകൾ, ഷാഡോകൾ തുടങ്ങിയവ.

ഈ പ്രക്രിയ കൂടുതൽ കാര്യക്ഷമമാക്കാൻ, ആധുനിക ബ്രൗസറുകൾ ഒരു ക്യാൻവാസിൽ മാത്രമല്ല പെയിന്റ് ചെയ്യുന്നത്. അവ പലപ്പോഴും പേജിനെ ഒന്നിലധികം ലെയറുകളായി വിഭജിക്കുന്നു. ഉദാഹരണത്തിന്, ഒരു CSS transform ഉള്ള ഒരു സങ്കീർണ്ണ എലമെന്റ് അല്ലെങ്കിൽ ഒരു <video> എലമെന്റ് അതിന്റെ സ്വന്തം ലെയറിലേക്ക് പ്രൊമോട്ട് ചെയ്യപ്പെട്ടേക്കാം. ഓരോ ലെയറിലും പെയിന്റിംഗ് നടത്താൻ കഴിയും, ഇത് അവസാന ഘട്ടത്തിനുള്ള ഒരു നിർണ്ണായക ഒപ്റ്റിമൈസേഷനാണ്.

ഘട്ടം 5: കോമ്പോസിറ്റിംഗ് - അന്തിമ ചിത്രം ഒരുമിപ്പിക്കൽ

അവസാന ഘട്ടം കോമ്പോസിറ്റിംഗ് ആണ്. ബ്രൗസർ தனித்தனியாக പെയിന്റ് ചെയ്ത എല്ലാ ലെയറുകളും എടുത്ത് ശരിയായ ക്രമത്തിൽ ഒരുമിപ്പിച്ച് സ്ക്രീനിൽ പ്രദർശിപ്പിക്കുന്ന അന്തിമ ചിത്രം നിർമ്മിക്കുന്നു. ഇവിടെയാണ് ലെയറുകളുടെ ശക്തി പ്രകടമാകുന്നത്.

സ്വന്തം ലെയറിലുള്ള ഒരു എലമെന്റ് നിങ്ങൾ ആനിമേറ്റ് ചെയ്യുകയാണെങ്കിൽ (ഉദാഹരണത്തിന്, transform: translateX(10px); ഉപയോഗിച്ച്), ബ്രൗസറിന് മുഴുവൻ പേജിനും ലേഔട്ട് അല്ലെങ്കിൽ പെയിന്റ് ഘട്ടങ്ങൾ വീണ്ടും പ്രവർത്തിപ്പിക്കേണ്ടതില്ല. അതിന് നിലവിലുള്ള പെയിന്റ് ചെയ്ത ലെയറിനെ നീക്കാൻ കഴിയും. ഈ ജോലി പലപ്പോഴും ഗ്രാഫിക്സ് പ്രോസസ്സിംഗ് യൂണിറ്റിന് (GPU) കൈമാറുന്നു, ഇത് അവിശ്വസനീയമാംവിധം വേഗതയേറിയതും കാര്യക്ഷമവുമാക്കുന്നു. മിനുസമാർന്ന, സെക്കൻഡിൽ 60 ഫ്രെയിമുകൾ (fps) ഉള്ള ആനിമേഷനുകൾക്ക് പിന്നിലെ രഹസ്യം ഇതാണ്.

ജാവാസ്ക്രിപ്റ്റിന്റെ ഗംഭീര പ്രവേശനം: ഇന്ററാക്റ്റിവിറ്റിയുടെ എഞ്ചിൻ

അപ്പോൾ ഈ ചിട്ടയായ പൈപ്പ്ലൈനിൽ ജാവാസ്ക്രിപ്റ്റ് എവിടെയാണ് വരുന്നത്? എല്ലായിടത്തും. DOM, CSSOM എന്നിവ സൃഷ്ടിക്കപ്പെട്ടതിന് ശേഷം ഏത് സമയത്തും അവയെ പരിഷ്കരിക്കാൻ കഴിയുന്ന ചലനാത്മക ശക്തിയാണ് ജാവാസ്ക്രിപ്റ്റ്. ഇതാണ് അതിന്റെ പ്രധാന പ്രവർത്തനവും ഏറ്റവും വലിയ പ്രകടന അപകടസാധ്യതയും.

ഡിഫോൾട്ടായി, ജാവാസ്ക്രിപ്റ്റ് പാഴ്സർ-ബ്ലോക്കിംഗ് ആണ്. HTML പാഴ്സർ ഒരു <script> ടാഗിനെ (async അല്ലെങ്കിൽ defer എന്ന് അടയാളപ്പെടുത്തിയിട്ടില്ലാത്ത) കണ്ടുമുട്ടുമ്പോൾ, അത് DOM നിർമ്മിക്കുന്ന പ്രക്രിയ താൽക്കാലികമായി നിർത്തണം. തുടർന്ന് അത് സ്ക്രിപ്റ്റ് (എക്സ്റ്റേണൽ ആണെങ്കിൽ) ലഭ്യമാക്കുകയും, എക്സിക്യൂട്ട് ചെയ്യുകയും, അതിനുശേഷം മാത്രം HTML പാഴ്സിംഗ് പുനരാരംഭിക്കുകയും ചെയ്യും. ഈ സ്ക്രിപ്റ്റ് നിങ്ങളുടെ ഡോക്യുമെന്റിന്റെ <head>-ൽ ആണെങ്കിൽ, DOM നിർമ്മാണം നിലയ്ക്കുന്നതിനാൽ നിങ്ങളുടെ പേജിന്റെ പ്രാരംഭ റെൻഡറിംഗ് കാര്യമായി വൈകിപ്പിക്കാൻ ഇതിന് കഴിയും.

ബ്ലോക്ക് ചെയ്യണോ വേണ്ടയോ: `async`, `defer`

ഈ ബ്ലോക്കിംഗ് സ്വഭാവം ലഘൂകരിക്കുന്നതിന്, <script> ടാഗിനായി നമുക്ക് ശക്തമായ രണ്ട് ആട്രിബ്യൂട്ടുകൾ ഉണ്ട്:

• defer: HTML പാഴ്സിംഗ് തുടരുമ്പോൾ തന്നെ സ്ക്രിപ്റ്റ് പശ്ചാത്തലത്തിൽ ഡൗൺലോഡ് ചെയ്യാൻ ഈ ആട്രിബ്യൂട്ട് ബ്രൗസറിനോട് പറയുന്നു. HTML പാഴ്സർ പൂർത്തിയായ ശേഷം, എന്നാൽ DOMContentLoaded ഇവന്റ് ഫയർ ചെയ്യുന്നതിന് മുമ്പായി സ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്യപ്പെടുമെന്ന് ഉറപ്പുനൽകുന്നു. നിങ്ങൾക്ക് ഒന്നിലധികം ഡെഫേർഡ് സ്ക്രിപ്റ്റുകൾ ഉണ്ടെങ്കിൽ, അവ ഡോക്യുമെന്റിൽ കാണുന്ന ക്രമത്തിൽ എക്സിക്യൂട്ട് ചെയ്യും. പൂർണ്ണമായ DOM ലഭ്യമാകേണ്ടതും എക്സിക്യൂഷൻ ഓർഡർ പ്രധാനപ്പെട്ടതുമായ സ്ക്രിപ്റ്റുകൾക്ക് ഇത് ഒരു മികച്ച തിരഞ്ഞെടുപ്പാണ്.
• async: ഈ ആട്രിബ്യൂട്ടും HTML പാഴ്സിംഗിനെ തടസ്സപ്പെടുത്താതെ സ്ക്രിപ്റ്റ് പശ്ചാത്തലത്തിൽ ഡൗൺലോഡ് ചെയ്യാൻ ബ്രൗസറിനോട് പറയുന്നു. എന്നിരുന്നാലും, സ്ക്രിപ്റ്റ് ഡൗൺലോഡ് ചെയ്താലുടൻ, HTML പാഴ്സർ താൽക്കാലികമായി നിർത്തുകയും സ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്യുകയും ചെയ്യും. അസിങ്ക് സ്ക്രിപ്റ്റുകൾക്ക് ഉറപ്പായ എക്സിക്യൂഷൻ ഓർഡർ ഇല്ല. അനലിറ്റിക്സ് അല്ലെങ്കിൽ പരസ്യങ്ങൾ പോലുള്ള സ്വതന്ത്രമായ, തേർഡ്-പാർട്ടി സ്ക്രിപ്റ്റുകൾക്ക് ഇത് അനുയോജ്യമാണ്, അവിടെ എക്സിക്യൂഷൻ ഓർഡർ പ്രശ്നമല്ല, അവ എത്രയും പെട്ടെന്ന് പ്രവർത്തിപ്പിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു.

എല്ലാം മാറ്റാനുള്ള ശക്തി: DOM, CSSOM എന്നിവ കൈകാര്യം ചെയ്യൽ

ഒരിക്കൽ എക്സിക്യൂട്ട് ചെയ്താൽ, ജാവാസ്ക്രിപ്റ്റിന് DOM, CSSOM എന്നിവയിലേക്ക് പൂർണ്ണ API ആക്സസ് ഉണ്ട്. ഇതിന് എലമെന്റുകൾ ചേർക്കാനും, നീക്കം ചെയ്യാനും, അവയുടെ ഉള്ളടക്കം മാറ്റാനും, അവയുടെ സ്റ്റൈലുകൾ പരിഷ്കരിക്കാനും കഴിയും. ഉദാഹരണത്തിന്: document.getElementById('welcome-banner').style.display = 'none'; ഈ ഒരൊറ്റ ജാവാസ്ക്രിപ്റ്റ് ലൈൻ 'welcome-banner' എലമെന്റിന്റെ CSSOM പരിഷ്കരിക്കുന്നു. ഈ മാറ്റം നിലവിലുള്ള റെൻഡർ ട്രീയെ അസാധുവാക്കും, സ്ക്രീനിലെ അപ്ഡേറ്റ് പ്രതിഫലിപ്പിക്കുന്നതിന് റെൻഡറിംഗ് പൈപ്പ്ലൈനിന്റെ ഭാഗങ്ങൾ വീണ്ടും പ്രവർത്തിപ്പിക്കാൻ ബ്രൗസറിനെ നിർബന്ധിതമാക്കും.

പ്രകടനത്തിലെ വില്ലന്മാർ: ജാവാസ്ക്രിപ്റ്റ് എങ്ങനെ പൈപ്പ്ലൈനിനെ തടസ്സപ്പെടുത്തുന്നു

ഓരോ തവണയും ജാവാസ്ക്രിപ്റ്റ് DOM അല്ലെങ്കിൽ CSSOM പരിഷ്കരിക്കുമ്പോൾ, അത് ഒരു റീഫ്ലോയും റീപെയിന്റും ട്രിഗർ ചെയ്യാനുള്ള സാധ്യതയുണ്ട്. ഒരു ഡൈനാമിക് വെബിന് ഇത് ആവശ്യമാണെങ്കിലും, ഈ പ്രവർത്തനങ്ങൾ കാര്യക്ഷമമല്ലാത്ത രീതിയിൽ ചെയ്യുന്നത് നിങ്ങളുടെ ആപ്ലിക്കേഷനെ സ്തംഭിപ്പിക്കും. ഏറ്റവും സാധാരണമായ പ്രകടന കെണികൾ നമുക്ക് പരിശോധിക്കാം.

ദുഷിച്ച ചക്രം: സിൻക്രണസ് ലേഔട്ടുകളും ലേഔട്ട് ത്രാഷിംഗും നിർബന്ധിക്കൽ

ഫ്രണ്ട്-എൻഡ് ഡെവലപ്‌മെന്റിലെ ഏറ്റവും ഗുരുതരവും സൂക്ഷ്മവുമായ പ്രകടന പ്രശ്നങ്ങളിലൊന്നാണിത്. നമ്മൾ ചർച്ച ചെയ്തതുപോലെ, ലേഔട്ട് ഒരു ചെലവേറിയ പ്രവർത്തനമാണ്. കാര്യക്ഷമതയ്ക്കായി, ബ്രൗസറുകൾ സ്മാർട്ടാണ്, അവ DOM മാറ്റങ്ങളെ ബാച്ച് ചെയ്യാൻ ശ്രമിക്കുന്നു. അവ നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് സ്റ്റൈൽ മാറ്റങ്ങളെ ക്യൂവിൽ നിർത്തുകയും, പിന്നീട് (സാധാരണയായി നിലവിലെ ഫ്രെയിമിന്റെ അവസാനം) എല്ലാ മാറ്റങ്ങളും ഒരേസമയം പ്രയോഗിക്കുന്നതിനായി ഒരൊറ്റ ലേഔട്ട് കണക്കുകൂട്ടൽ നടത്തുകയും ചെയ്യും.

എന്നിരുന്നാലും, നിങ്ങൾക്ക് ഈ ഒപ്റ്റിമൈസേഷൻ തകർക്കാൻ കഴിയും. നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് ഒരു സ്റ്റൈൽ പരിഷ്കരിക്കുകയും തുടർന്ന് ഉടനടി ഒരു ജ്യാമിതീയ മൂല്യം (ഒരു എലമെന്റിന്റെ offsetHeight, offsetWidth, അല്ലെങ്കിൽ getBoundingClientRect() പോലുള്ളവ) അഭ്യർത്ഥിക്കുകയും ചെയ്താൽ, നിങ്ങൾ ബ്രൗസറിനെ സിൻക്രണസ് ആയി ലേഔട്ട് ഘട്ടം നടത്താൻ നിർബന്ധിക്കുന്നു. ബ്രൗസറിന് നിർത്തി, തീർപ്പുകൽപ്പിക്കാത്ത എല്ലാ സ്റ്റൈൽ മാറ്റങ്ങളും പ്രയോഗിച്ച്, പൂർണ്ണമായ ലേഔട്ട് കണക്കുകൂട്ടൽ നടത്തി, തുടർന്ന് അഭ്യർത്ഥിച്ച മൂല്യം നിങ്ങളുടെ സ്ക്രിപ്റ്റിന് തിരികെ നൽകേണ്ടി വരുന്നു. ഇതിനെ ഫോഴ്സ്ഡ് സിൻക്രണസ് ലേഔട്ട് എന്ന് വിളിക്കുന്നു.

ഇത് ഒരു ലൂപ്പിനുള്ളിൽ സംഭവിക്കുമ്പോൾ, ലേഔട്ട് ത്രാഷിംഗ് എന്നറിയപ്പെടുന്ന ഒരു വിനാശകരമായ പ്രകടന പ്രശ്നത്തിലേക്ക് നയിക്കുന്നു. നിങ്ങൾ ആവർത്തിച്ച് വായിക്കുകയും എഴുതുകയും ചെയ്യുന്നു, ഒരൊറ്റ ഫ്രെയിമിനുള്ളിൽ തന്നെ മുഴുവൻ പേജും വീണ്ടും വീണ്ടും റീഫ്ലോ ചെയ്യാൻ ബ്രൗസറിനെ നിർബന്ധിക്കുന്നു.

ലേഔട്ട് ത്രാഷിംഗിന്റെ ഉദാഹരണം (ചെയ്യാൻ പാടില്ലാത്തത്):

            
function resizeAllParagraphs() {
  const paragraphs = document.querySelectorAll('p');
  for (let i = 0; i < paragraphs.length; i++) {
    // READ: gets the width of the container (forces layout)
    const containerWidth = document.body.offsetWidth;
    
    // WRITE: sets the paragraph's width (invalidates layout)
    paragraphs[i].style.width = (containerWidth / 2) + 'px';
  }
}

            

              
                Copy
              
            
          

ഈ കോഡിൽ, ലൂപ്പിന്റെ ഓരോ ആവർത്തനത്തിലും, നമ്മൾ offsetWidth വായിക്കുകയും (ലേഔട്ട് ട്രിഗർ ചെയ്യുന്ന വായന) തുടർന്ന് ഉടനടി style.width-ലേക്ക് എഴുതുകയും (ലേഔട്ട് അസാധുവാക്കുന്ന എഴുത്ത്) ചെയ്യുന്നു. ഇത് ഓരോ പാരഗ്രാഫിലും ഒരു റീഫ്ലോ നിർബന്ധിക്കുന്നു.

ഒപ്റ്റിമൈസ് ചെയ്ത പതിപ്പ് (വായനകളും എഴുത്തുകളും ബാച്ച് ചെയ്യൽ):

            
function resizeAllParagraphsOptimized() {
  const paragraphs = document.querySelectorAll('p');
  
  // First, READ all the values you need
  const containerWidth = document.body.offsetWidth;
  
  // Then, WRITE all the changes
  for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.width = (containerWidth / 2) + 'px';
  }
}

            

              
                Copy
              
            
          

എല്ലാ വായനകളും ആദ്യം നടത്തുകയും തുടർന്ന് എല്ലാ എഴുത്തുകളും നടത്തുകയും ചെയ്യുന്ന രീതിയിൽ കോഡ് പുനഃക്രമീകരിക്കുന്നതിലൂടെ, നമ്മൾ ബ്രൗസറിനെ പ്രവർത്തനങ്ങൾ ബാച്ച് ചെയ്യാൻ അനുവദിക്കുന്നു. പ്രാരംഭ വീതി ലഭിക്കുന്നതിന് ഇത് ഒരു ലേഔട്ട് കണക്കുകൂട്ടൽ നടത്തുകയും തുടർന്ന് എല്ലാ സ്റ്റൈൽ അപ്ഡേറ്റുകളും പ്രോസസ്സ് ചെയ്യുകയും ചെയ്യുന്നു, ഇത് ഫ്രെയിമിന്റെ അവസാനം ഒരൊറ്റ റീഫ്ലോയിലേക്ക് നയിക്കുന്നു. പ്രകടനത്തിലെ വ്യത്യാസം നാടകീയമായിരിക്കും.

പ്രധാന ത്രെഡിന്റെ തടസ്സം: ദീർഘനേരം പ്രവർത്തിക്കുന്ന ജാവാസ്ക്രിപ്റ്റ് ടാസ്ക്കുകൾ

ബ്രൗസറിന്റെ പ്രധാന ത്രെഡ് ഒരു തിരക്കേറിയ സ്ഥലമാണ്. ജാവാസ്ക്രിപ്റ്റ് എക്സിക്യൂഷൻ കൈകാര്യം ചെയ്യുക, ഉപയോക്തൃ ഇൻപുട്ടിനോട് (ക്ലിക്കുകൾ, സ്ക്രോളുകൾ) പ്രതികരിക്കുക, റെൻഡറിംഗ് പൈപ്പ്ലൈൻ പ്രവർത്തിപ്പിക്കുക എന്നിവയുടെയെല്ലാം ഉത്തരവാദിത്തം ഇതിനാണ്. ജാവാസ്ക്രിപ്റ്റ് സിംഗിൾ-ത്രെഡഡ് ആയതിനാൽ, നിങ്ങൾ സങ്കീർണ്ണവും ദീർഘനേരം പ്രവർത്തിക്കുന്നതുമായ ഒരു സ്ക്രിപ്റ്റ് പ്രവർത്തിപ്പിക്കുകയാണെങ്കിൽ, നിങ്ങൾ ഫലപ്രദമായി പ്രധാന ത്രെഡിനെ ബ്ലോക്ക് ചെയ്യുകയാണ്. നിങ്ങളുടെ സ്ക്രിപ്റ്റ് പ്രവർത്തിക്കുമ്പോൾ, ബ്രൗസറിന് മറ്റൊന്നും ചെയ്യാൻ കഴിയില്ല. അതിന് ക്ലിക്കുകളോട് പ്രതികരിക്കാനോ, സ്ക്രോളുകൾ പ്രോസസ്സ് ചെയ്യാനോ, ഏതെങ്കിലും ആനിമേഷനുകൾ പ്രവർത്തിപ്പിക്കാനോ കഴിയില്ല. പേജ് പൂർണ്ണമായും നിശ്ചലവും പ്രതികരണശേഷിയില്ലാത്തതുമായിത്തീരുന്നു.

50ms-ൽ കൂടുതൽ സമയമെടുക്കുന്ന ഏതൊരു ടാസ്ക്കും ഒരു 'ലോംഗ് ടാസ്ക്' ആയി കണക്കാക്കപ്പെടുന്നു, ഇത് ഉപയോക്തൃ അനുഭവത്തെ, പ്രത്യേകിച്ച് ഇന്ററാക്ഷൻ ടു നെക്സ്റ്റ് പെയിന്റ് (INP) കോർ വെബ് വൈറ്റലിനെ പ്രതികൂലമായി ബാധിക്കും. സങ്കീർണ്ണമായ ഡാറ്റാ പ്രോസസ്സിംഗ്, വലിയ API പ്രതികരണങ്ങൾ കൈകാര്യം ചെയ്യൽ, അല്ലെങ്കിൽ തീവ്രമായ കണക്കുകൂട്ടലുകൾ എന്നിവ സാധാരണ കുറ്റവാളികളിൽ ഉൾപ്പെടുന്നു.

ദീർഘമായ ടാസ്ക്കുകളെ ചെറിയ ഭാഗങ്ങളായി വിഭജിച്ച്, അതിനിടയിൽ പ്രധാന ത്രെഡിന് 'വഴങ്ങുക' എന്നതാണ് പരിഹാരം. ഇത് മറ്റ് ജോലികൾ കൈകാര്യം ചെയ്യാൻ ബ്രൗസറിന് അവസരം നൽകുന്നു. setTimeout(callback, 0) ഉപയോഗിച്ച് ഇത് ലളിതമായി ചെയ്യാൻ കഴിയും, ഇത് ബ്രൗസറിന് ഒരു ശ്വാസം എടുക്കാൻ അവസരം ലഭിച്ചതിന് ശേഷം, ഭാവിയിലെ ഒരു ടാസ്കിൽ കോൾബാക്ക് പ്രവർത്തിപ്പിക്കാൻ ഷെഡ്യൂൾ ചെയ്യുന്നു.

ആയിരം മുറിവുകളാലുള്ള മരണം: അമിതമായ DOM മാനിപ്പുലേഷനുകൾ

ഒരൊറ്റ DOM മാനിപ്പുലേഷൻ വേഗതയേറിയതാണെങ്കിലും, ആയിരക്കണക്കിന് എണ്ണം ചെയ്യുന്നത് വളരെ മന്ദഗതിയിലാകാം. ഓരോ തവണയും നിങ്ങൾ ലൈവ് DOM-ൽ ഒരു എലമെന്റ് ചേർക്കുകയോ, നീക്കം ചെയ്യുകയോ, അല്ലെങ്കിൽ പരിഷ്കരിക്കുകയോ ചെയ്യുമ്പോൾ, നിങ്ങൾ ഒരു റീഫ്ലോയും റീപെയിന്റും ട്രിഗർ ചെയ്യാനുള്ള സാധ്യതയുണ്ട്. നിങ്ങൾക്ക് ഒരു വലിയ ലിസ്റ്റ് ഇനങ്ങൾ സൃഷ്ടിച്ച് അവ ഓരോന്നായി പേജിലേക്ക് ചേർക്കണമെങ്കിൽ, നിങ്ങൾ ബ്രൗസറിനായി ധാരാളം അനാവശ്യ ജോലികൾ സൃഷ്ടിക്കുകയാണ്.

കൂടുതൽ മികച്ച ഒരു സമീപനം, നിങ്ങളുടെ DOM ഘടന 'ഓഫ്‌ലൈനായി' നിർമ്മിച്ച് തുടർന്ന് ഒരൊറ്റ പ്രവർത്തനത്തിൽ ലൈവ് DOM-ലേക്ക് ചേർക്കുക എന്നതാണ്. DocumentFragment ഒരു ഭാരം കുറഞ്ഞതും, പാരന്റ് ഇല്ലാത്തതുമായ ഒരു മിനിമൽ DOM ഒബ്ജക്റ്റാണ്. നിങ്ങൾക്ക് ഇതിനെ ഒരു താൽക്കാലിക കണ്ടെയ്നറായി കരുതാം. നിങ്ങളുടെ എല്ലാ പുതിയ എലമെന്റുകളും ഫ്രാഗ്മെന്റിലേക്ക് ചേർക്കാനും, തുടർന്ന് മുഴുവൻ ഫ്രാഗ്മെന്റും ഒരൊറ്റയടിക്ക് DOM-ലേക്ക് ചേർക്കാനും കഴിയും. നിങ്ങൾ എത്ര എലമെന്റുകൾ ചേർത്താലും ഇത് ഒരൊറ്റ റീഫ്ലോ/റീപെയിന്റിൽ കലാശിക്കുന്നു.

DocumentFragment ഉപയോഗിക്കുന്നതിന്റെ ഉദാഹരണം:

            
const list = document.getElementById('my-list');
const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

// Create a DocumentFragment
const fragment = document.createDocumentFragment();

data.forEach(itemText => {
  const li = document.createElement('li');
  li.textContent = itemText;
  // Append to the fragment, not the live DOM
  fragment.appendChild(li);
});

// Append the entire fragment in one operation
list.appendChild(fragment);

            

              
                Copy
              
            
          

മുറിഞ്ഞ ചലനങ്ങൾ: കാര്യക്ഷമമല്ലാത്ത ജാവാസ്ക്രിപ്റ്റ് ആനിമേഷനുകൾ

ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ആനിമേഷനുകൾ സൃഷ്ടിക്കുന്നത് സാധാരണമാണ്, എന്നാൽ അത് കാര്യക്ഷമമല്ലാത്ത രീതിയിൽ ചെയ്യുന്നത് ഇടർച്ചയ്ക്കും 'ജാങ്കിനും' കാരണമാകുന്നു. ഒരു സാധാരണ തെറ്റായ രീതി setTimeout അല്ലെങ്കിൽ setInterval ഉപയോഗിച്ച് ഒരു ലൂപ്പിൽ എലമെന്റ് സ്റ്റൈലുകൾ അപ്ഡേറ്റ് ചെയ്യുക എന്നതാണ്.

പ്രശ്നം എന്തെന്നാൽ, ഈ ടൈമറുകൾ ബ്രൗസറിന്റെ റെൻഡറിംഗ് സൈക്കിളുമായി സമന്വയിപ്പിച്ചിട്ടില്ല. ബ്രൗസർ ഒരു ഫ്രെയിം പെയിന്റ് ചെയ്തതിന് ശേഷം നിങ്ങളുടെ സ്ക്രിപ്റ്റ് പ്രവർത്തിക്കുകയും ഒരു സ്റ്റൈൽ അപ്ഡേറ്റ് ചെയ്യുകയും ചെയ്തേക്കാം, ഇത് അധിക ജോലി ചെയ്യാൻ ബ്രൗസറിനെ നിർബന്ധിക്കുകയും അടുത്ത ഫ്രെയിമിന്റെ സമയപരിധി നഷ്ടപ്പെടാൻ സാധ്യതയുണ്ടാക്കുകയും, തന്മൂലം ഒരു ഫ്രെയിം ഡ്രോപ്പ് ആവുകയും ചെയ്യും.

ജാവാസ്ക്രിപ്റ്റ് ആനിമേഷനുകൾ നടത്താനുള്ള ആധുനികവും ശരിയായതുമായ മാർഗ്ഗം requestAnimationFrame(callback) ഉപയോഗിക്കുക എന്നതാണ്. നിങ്ങൾ ഒരു ആനിമേഷൻ നടത്താൻ ആഗ്രഹിക്കുന്നുവെന്ന് ഈ API ബ്രൗസറിനോട് പറയുകയും അടുത്ത ആനിമേഷൻ ഫ്രെയിമിനായി വിൻഡോയുടെ ഒരു റീപെയിന്റ് ഷെഡ്യൂൾ ചെയ്യാൻ അഭ്യർത്ഥിക്കുകയും ചെയ്യുന്നു. ബ്രൗസർ അതിന്റെ അടുത്ത പെയിന്റ് നടത്തുന്നതിന് തൊട്ടുമുമ്പ് നിങ്ങളുടെ കോൾബാക്ക് ഫംഗ്ഷൻ എക്സിക്യൂട്ട് ചെയ്യും, ഇത് നിങ്ങളുടെ അപ്ഡേറ്റുകൾ കൃത്യസമയത്തും കാര്യക്ഷമവുമാണെന്ന് ഉറപ്പാക്കുന്നു. പേജ് ഒരു പശ്ചാത്തല ടാബിൽ ആണെങ്കിൽ കോൾബാക്ക് പ്രവർത്തിപ്പിക്കാതിരിക്കുന്നതിലൂടെ ബ്രൗസറിന് ഒപ്റ്റിമൈസ് ചെയ്യാനും കഴിയും.

കൂടാതെ, നിങ്ങൾ എങ്ങനെ ആനിമേറ്റ് ചെയ്യുന്നു എന്നതുപോലെ തന്നെ എന്താണ് ആനിമേറ്റ് ചെയ്യുന്നത് എന്നതും പ്രധാനമാണ്. width, height, top, അല്ലെങ്കിൽ left പോലുള്ള പ്രോപ്പർട്ടികൾ മാറ്റുന്നത് ലേഔട്ട് ഘട്ടത്തെ ട്രിഗർ ചെയ്യും, അത് വേഗത കുറഞ്ഞതാണ്. ഏറ്റവും സുഗമമായ ആനിമേഷനുകൾക്കായി, കമ്പോസിറ്ററിന് മാത്രം കൈകാര്യം ചെയ്യാൻ കഴിയുന്ന പ്രോപ്പർട്ടികളിൽ ഉറച്ചുനിൽക്കണം, ഇത് സാധാരണയായി GPU-വിൽ പ്രവർത്തിക്കുന്നു. അവ പ്രധാനമായും ഇവയാണ്:

• transform (ചലിപ്പിക്കുന്നതിനും, സ്കെയിൽ ചെയ്യുന്നതിനും, തിരിക്കുന്നതിനും)
• opacity (ഫേഡ് ഇൻ/ഔട്ട് ചെയ്യുന്നതിന്)

ഈ പ്രോപ്പർട്ടികൾ ആനിമേറ്റ് ചെയ്യുന്നത് ലേഔട്ടോ പെയിന്റോ വീണ്ടും പ്രവർത്തിപ്പിക്കാതെ തന്നെ ഒരു എലമെന്റിന്റെ നിലവിലുള്ള പെയിന്റ് ചെയ്ത ലെയറിനെ നീക്കാനോ ഫേഡ് ചെയ്യാനോ ബ്രൗസറിനെ അനുവദിക്കുന്നു. സ്ഥിരമായ 60fps ആനിമേഷനുകൾ നേടുന്നതിനുള്ള താക്കോൽ ഇതാണ്.

സിദ്ധാന്തത്തിൽ നിന്ന് പ്രയോഗത്തിലേക്ക്: പെർഫോമൻസ് ഒപ്റ്റിമൈസേഷനുള്ള ഒരു ടൂൾകിറ്റ്

സിദ്ധാന്തം മനസ്സിലാക്കുന്നത് ആദ്യപടിയാണ്. ഇനി, ഈ അറിവ് പ്രായോഗികമാക്കാൻ നിങ്ങൾക്ക് ഉപയോഗിക്കാവുന്ന ചില പ്രവർത്തനക്ഷമമായ തന്ത്രങ്ങളും ടൂളുകളും നോക്കാം.

സ്ക്രിപ്റ്റുകൾ ബുദ്ധിപരമായി ലോഡ് ചെയ്യുക

നിങ്ങൾ എങ്ങനെ നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് ലോഡ് ചെയ്യുന്നു എന്നത് ആദ്യത്തെ പ്രതിരോധ നിരയാണ്. പ്രാരംഭ റെൻഡറിന് ഒരു സ്ക്രിപ്റ്റ് ശരിക്കും നിർണായകമാണോ എന്ന് എപ്പോഴും ചോദിക്കുക. അല്ലെങ്കിൽ, DOM ആവശ്യമുള്ള സ്ക്രിപ്റ്റുകൾക്ക് defer ഉപയോഗിക്കുക അല്ലെങ്കിൽ സ്വതന്ത്രമായവയ്ക്ക് async ഉപയോഗിക്കുക. ആധുനിക ആപ്ലിക്കേഷനുകൾക്കായി, ഡൈനാമിക് import() ഉപയോഗിച്ച് കോഡ്-സ്പ്ലിറ്റിംഗ് പോലുള്ള ടെക്നിക്കുകൾ ഉപയോഗിക്കുക, ഇത് നിലവിലെ കാഴ്ച്ചയ്‌ക്കോ ഉപയോക്തൃ ഇടപെടലിനോ ആവശ്യമായ ജാവാസ്ക്രിപ്റ്റ് മാത്രം ലോഡ് ചെയ്യാൻ സഹായിക്കും. വെബ്പാക്ക് അല്ലെങ്കിൽ റോൾഅപ്പ് പോലുള്ള ടൂളുകൾ നിങ്ങളുടെ അന്തിമ ബണ്ടിലുകളിൽ നിന്ന് ഉപയോഗിക്കാത്ത കോഡ് ഒഴിവാക്കാൻ ട്രീ-ഷേക്കിംഗ് വാഗ്ദാനം ചെയ്യുന്നു, ഇത് ഫയൽ വലുപ്പങ്ങൾ കുറയ്ക്കുന്നു.

ഉയർന്ന ആവൃത്തിയിലുള്ള ഇവന്റുകളെ നിയന്ത്രിക്കൽ: ഡിബൗൺസിംഗും ത്രോട്ടിലിംഗും

scroll, resize, mousemove പോലുള്ള ചില ബ്രൗസർ ഇവന്റുകൾ സെക്കൻഡിൽ നൂറുകണക്കിന് തവണ ഫയർ ചെയ്യാം. അവയോട് ഘടിപ്പിച്ച ഒരു ചെലവേറിയ ഇവന്റ് ഹാൻഡ്‌ലർ നിങ്ങൾക്കുണ്ടെങ്കിൽ (ഉദാഹരണത്തിന്, DOM മാനിപ്പുലേഷൻ നടത്തുന്ന ഒന്ന്), നിങ്ങൾക്ക് എളുപ്പത്തിൽ പ്രധാന ത്രെഡിനെ തടസ്സപ്പെടുത്താൻ കഴിയും. ഇവിടെ രണ്ട് പാറ്റേണുകൾ അത്യാവശ്യമാണ്:

• ത്രോട്ടിലിംഗ് (Throttling): ഒരു നിശ്ചിത സമയത്തിനുള്ളിൽ നിങ്ങളുടെ ഫംഗ്ഷൻ പരമാവധി ഒരു തവണ മാത്രമേ എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നുള്ളൂ എന്ന് ഉറപ്പാക്കുന്നു. ഉദാഹരണത്തിന്, 'ഈ ഫംഗ്ഷൻ ഓരോ 200ms-ലും ഒന്നിൽ കൂടുതൽ തവണ പ്രവർത്തിപ്പിക്കരുത്'. ഇൻഫിനിറ്റ് സ്ക്രോൾ ഹാൻഡ്‌ലറുകൾ പോലുള്ള കാര്യങ്ങൾക്ക് ഇത് ഉപയോഗപ്രദമാണ്.
• ഡിബൗൺസിംഗ് (Debouncing): ഒരു നിശ്ചിത കാലയളവിലെ നിഷ്‌ക്രിയത്വത്തിന് ശേഷം മാത്രം നിങ്ങളുടെ ഫംഗ്ഷൻ എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കുന്നു. ഉദാഹരണത്തിന്, 'ഉപയോക്താവ് 300ms നേരത്തേക്ക് ടൈപ്പിംഗ് നിർത്തിയതിന് ശേഷം മാത്രം ഈ സെർച്ച് ഫംഗ്ഷൻ പ്രവർത്തിപ്പിക്കുക'. ഓട്ടോകംപ്ലീറ്റ് സെർച്ച് ബാറുകൾക്ക് ഇത് അനുയോജ്യമാണ്.

ഭാരം ഒഴിവാക്കൽ: വെബ് വർക്കേഴ്സിനെക്കുറിച്ചൊരു ആമുഖം

നേരിട്ടുള്ള DOM ആക്സസ് ആവശ്യമില്ലാത്ത, ശരിക്കും ഭാരമേറിയതും ദീർഘനേരം പ്രവർത്തിക്കുന്നതുമായ ജാവാസ്ക്രിപ്റ്റ് കണക്കുകൂട്ടലുകൾക്ക്, വെബ് വർക്കേഴ്സ് ഒരു ഗെയിം ചേഞ്ചറാണ്. ഒരു വെബ് വർക്കർ നിങ്ങളെ ഒരു പ്രത്യേക പശ്ചാത്തല ത്രെഡിൽ ഒരു സ്ക്രിപ്റ്റ് പ്രവർത്തിപ്പിക്കാൻ അനുവദിക്കുന്നു. ഇത് പ്രധാന ത്രെഡിനെ ഉപയോക്താവിനോട് പ്രതികരണശേഷിയുള്ളതായി നിലനിർത്താൻ പൂർണ്ണമായും സ്വതന്ത്രമാക്കുന്നു. ഡാറ്റ അയയ്‌ക്കുന്നതിനും ഫലങ്ങൾ സ്വീകരിക്കുന്നതിനും നിങ്ങൾക്ക് പ്രധാന ത്രെഡും വർക്കർ ത്രെഡും തമ്മിൽ സന്ദേശങ്ങൾ കൈമാറാൻ കഴിയും. ഇമേജ് പ്രോസസ്സിംഗ്, സങ്കീർണ്ണമായ ഡാറ്റാ വിശകലനം, അല്ലെങ്കിൽ പശ്ചാത്തലത്തിലുള്ള ഫെച്ചിംഗും കാഷിംഗും എന്നിവ ഇതിന്റെ ഉപയോഗങ്ങളിൽ ഉൾപ്പെടുന്നു.

ഒരു പെർഫോമൻസ് ഡിറ്റക്ടീവ് ആകുക: ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ ഉപയോഗിക്കൽ

നിങ്ങൾക്ക് അളക്കാൻ കഴിയാത്തത് നിങ്ങൾക്ക് ഒപ്റ്റിമൈസ് ചെയ്യാൻ കഴിയില്ല. Chrome, Edge, Firefox പോലുള്ള ആധുനിക ബ്രൗസറുകളിലെ പെർഫോമൻസ് പാനൽ നിങ്ങളുടെ ഏറ്റവും ശക്തമായ ഉപകരണമാണ്. ഇതാ ഒരു ദ്രുത ഗൈഡ്:

1. ഡെവലപ്പർ ടൂളുകൾ തുറന്ന് 'Performance' ടാബിലേക്ക് പോകുക.
2. റെക്കോർഡ് ബട്ടണിൽ ക്ലിക്ക് ചെയ്ത് നിങ്ങളുടെ സൈറ്റിൽ വേഗത കുറവാണെന്ന് സംശയിക്കുന്ന പ്രവർത്തനം നടത്തുക (ഉദാഹരണത്തിന്, സ്ക്രോളിംഗ്, ഒരു ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക).
3. റെക്കോർഡിംഗ് നിർത്തുക.

നിങ്ങൾക്ക് വിശദമായ ഒരു ഫ്ലേം ചാർട്ട് കാണാം. ഇനിപ്പറയുന്നവയ്ക്കായി നോക്കുക:

• ലോംഗ് ടാസ്ക്കുകൾ (Long Tasks): ഇവ ഒരു ചുവന്ന ത്രികോണം കൊണ്ട് അടയാളപ്പെടുത്തിയിരിക്കും. ഇവയാണ് നിങ്ങളുടെ പ്രധാന ത്രെഡ് ബ്ലോക്കറുകൾ. കാലതാമസത്തിന് കാരണമായ ഫംഗ്ഷൻ ഏതാണെന്ന് കാണാൻ അവയിൽ ക്ലിക്ക് ചെയ്യുക.
• പർപ്പിൾ 'ലേഔട്ട്' ബ്ലോക്കുകൾ: ഒരു വലിയ പർപ്പിൾ ബ്ലോക്ക് ലേഔട്ട് ഘട്ടത്തിൽ കാര്യമായ സമയം ചെലവഴിച്ചുവെന്ന് സൂചിപ്പിക്കുന്നു.
• ഫോഴ്സ്ഡ് സിൻക്രണസ് ലേഔട്ട് മുന്നറിയിപ്പുകൾ: ഫോഴ്സ്ഡ് റീഫ്ലോകളെക്കുറിച്ച് ടൂൾ പലപ്പോഴും വ്യക്തമായി മുന്നറിയിപ്പ് നൽകും, ഇതിന് കാരണമായ കോഡിന്റെ കൃത്യമായ വരികൾ കാണിച്ചുതരും.
• വലിയ പച്ച 'പെയിന്റ്' ബ്ലോക്കുകൾ: ഇവ ഒപ്റ്റിമൈസ് ചെയ്യാൻ കഴിയുന്ന സങ്കീർണ്ണമായ പെയിന്റ് പ്രവർത്തനങ്ങളെ സൂചിപ്പിക്കാം.

കൂടാതെ, 'Rendering' ടാബിൽ (പലപ്പോഴും ഡെവലപ്പർ ടൂൾസ് ഡ്രോയറിൽ മറഞ്ഞിരിക്കുന്നു) 'Paint Flashing' പോലുള്ള ഓപ്ഷനുകളുണ്ട്, ഇത് സ്ക്രീനിന്റെ ഭാഗങ്ങൾ റീപെയിന്റ് ചെയ്യപ്പെടുമ്പോഴെല്ലാം അവയെ പച്ച നിറത്തിൽ ഹൈലൈറ്റ് ചെയ്യും. അനാവശ്യമായ റീപെയിന്റുകൾ ദൃശ്യപരമായി ഡീബഗ് ചെയ്യുന്നതിനുള്ള മികച്ച മാർഗമാണിത്.

ഉപസംഹാരം: ഓരോ ഫ്രെയിമിലും വേഗതയേറിയ ഒരു വെബ് നിർമ്മിക്കാം

ബ്രൗസർ റെൻഡറിംഗ് പൈപ്പ്ലൈൻ ഒരു സങ്കീർണ്ണവും എന്നാൽ യുക്തിസഹവുമായ പ്രക്രിയയാണ്. ഡെവലപ്പർമാർ എന്ന നിലയിൽ, നമ്മുടെ ജാവാസ്ക്രിപ്റ്റ് കോഡ് ഈ പൈപ്പ്ലൈനിലെ ഒരു സ്ഥിരം അതിഥിയാണ്, അതിന്റെ പെരുമാറ്റം ഒരു സുഗമമായ അനുഭവം സൃഷ്ടിക്കാൻ സഹായിക്കുമോ അതോ തടസ്സങ്ങൾ ഉണ്ടാക്കുമോ എന്ന് നിർണ്ണയിക്കുന്നു. ഓരോ ഘട്ടത്തെയും—പാഴ്സിംഗ് മുതൽ കോമ്പോസിറ്റിംഗ് വരെ—മനസ്സിലാക്കുന്നതിലൂടെ, ബ്രൗസറിനോട് ചേർന്ന് പ്രവർത്തിക്കുന്ന കോഡ് എഴുതാനുള്ള ഉൾക്കാഴ്ച നമുക്ക് ലഭിക്കുന്നു, അല്ലാതെ അതിനെതിരെ പ്രവർത്തിക്കുന്ന കോഡല്ല.

പ്രധാന പാഠങ്ങൾ അവബോധത്തിന്റെയും പ്രവർത്തനത്തിന്റെയും ഒരു മിശ്രിതമാണ്:

• പ്രധാന ത്രെഡിനെ ബഹുമാനിക്കുക: നിർണ്ണായകമല്ലാത്ത സ്ക്രിപ്റ്റുകൾ ഡെഫർ ചെയ്തും, ദൈർഘ്യമേറിയ ടാസ്ക്കുകൾ വിഭജിച്ചും, ഭാരമേറിയ ജോലികൾ വെബ് വർക്കേഴ്സിലേക്ക് മാറ്റിയും അതിനെ സ്വതന്ത്രമായി നിലനിർത്തുക.
• ലേഔട്ട് ത്രാഷിംഗ് ഒഴിവാക്കുക: DOM റീഡുകളും റൈറ്റുകളും ബാച്ച് ചെയ്യാൻ നിങ്ങളുടെ കോഡ് ഘടനപ്പെടുത്തുക. ഈ ലളിതമായ മാറ്റം വലിയ പ്രകടന നേട്ടങ്ങൾ നൽകും.
• DOM-ൽ മിടുക്ക് കാണിക്കുക: ലൈവ് DOM-ൽ നിങ്ങൾ തൊടുന്ന തവണകളുടെ എണ്ണം കുറയ്ക്കുന്നതിന് ഡോക്യുമെന്റ് ഫ്രാഗ്മെന്റുകൾ പോലുള്ള ടെക്നിക്കുകൾ ഉപയോഗിക്കുക.
• കാര്യക്ഷമമായി ആനിമേറ്റ് ചെയ്യുക: പഴയ ടൈമർ രീതികളേക്കാൾ requestAnimationFrame തിരഞ്ഞെടുക്കുക, കൂടാതെ transform, opacity പോലുള്ള കമ്പോസിറ്റർ-ഫ്രണ്ട്ലി പ്രോപ്പർട്ടികളിൽ ഉറച്ചുനിൽക്കുക.
• എപ്പോഴും അളക്കുക: നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പ്രൊഫൈൽ ചെയ്യാനും, യഥാർത്ഥ തടസ്സങ്ങൾ കണ്ടെത്താനും, നിങ്ങളുടെ ഒപ്റ്റിമൈസേഷനുകൾ സാധൂകരിക്കാനും ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ ഉപയോഗിക്കുക.

ഉയർന്ന പ്രകടനമുള്ള വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നത് മുൻകൂട്ടിയുള്ള ഒപ്റ്റിമൈസേഷനെക്കുറിച്ചോ അവ്യക്തമായ തന്ത്രങ്ങൾ മനഃപാഠമാക്കുന്നതിനെക്കുറിച്ചോ അല്ല. നിങ്ങൾ നിർമ്മിക്കുന്ന പ്ലാറ്റ്‌ഫോമിനെ അടിസ്ഥാനപരമായി മനസ്സിലാക്കുന്നതിനെക്കുറിച്ചാണ്. ജാവാസ്ക്രിപ്റ്റും റെൻഡറിംഗ് പൈപ്പ്ലൈനും തമ്മിലുള്ള പരസ്പരപ്രവർത്തനത്തിൽ വൈദഗ്ദ്ധ്യം നേടുന്നതിലൂടെ, എല്ലായിടത്തുമുള്ള എല്ലാവർക്കും വേഗതയേറിയതും, കൂടുതൽ കാര്യക്ഷമവും, ആത്യന്തികമായി കൂടുതൽ ആസ്വാദ്യകരവുമായ വെബ് അനുഭവങ്ങൾ സൃഷ്ടിക്കാൻ നിങ്ങൾ സ്വയം പ്രാപ്തരാകുന്നു.